<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        .content {
            margin-top: 10%;
            text-align: center;
        }
    </style>
</head>

<body>

    <img src="http://dmp-install.eos-beijing-1.cmecloud.cn/201811/2/A20A193F30914FBE8ADBB4ED2BA40E61.jpg">
    <div class="content">

        <div class="project">
            <div class="selector-div selector-div-1">
                <select name="car-selector" class="car-selector">
                    <option value="">选择产品1</option>
                    <option value="10">10车型A</option>
                    <option value="20">20车型B</option>
                    <option value="30">30车型C</option>
                    <option value="40">40车型D</option>
                </select>
            </div>

            <div class="input-div input-div-1">
                <input type="text" name="car-name" class="car-name" readonly>
            </div>
        </div>

        <br>
        <br>
        <br>

        <div class="project">
            <div class="selector-div">
                <select name="car-selector" class="car-selector">
                    <option value="">选择产品2</option>
                    <option value="50">50车型A</option>
                    <option value="60">60车型B</option>
                    <option value="70">70车型C</option>
                    <option value="80">80车型D</option>
                </select>
            </div>

            <div class="input-div input-div-2">
                <input type="text" name="car-name" class="car-name" readonly>
            </div>
        </div>

        <br>
        <br>
        <br>
        总价格:
        <input type="text" name="car-name" id="total" readonly>

    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"> </script>
    <script>
        $(function () {

            $(".car-selector").change(function () {

                $(".project").each(function () {
                    var checkValue = $(this).find(".car-selector").val();
                    $(this).find(".car-name").val(checkValue);
                })

                $('.car-name').trigger("propertychange")
            })


            $('.car-name').bind('input propertychange', function () {

                total = 0;
                $(".car-name").each(function () {
                    var pic = parseFloat($(this).val());
                    if (isNaN(pic)) {
                        pic = 0;
                    }
                    total += pic;
                });

                $("#total").val(total);
            });
        });
    </script>
</body>

</html>